<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-dropdown size="medium" placement="bottom-start" @command="handleCommandEvent">
				<el-button size="small" type="primary" icon="el-icon-plus"></el-button>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="addFiles" icon="el-icon-upload2">上传文件</el-dropdown-item>
					<el-dropdown-item command="addFolder" icon="el-icon-folder-add">新建文件夹</el-dropdown-item>
					<el-dropdown-item command="addLinks" icon="el-icon-link">新建外部链接</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-divider direction="vertical"></el-divider>
			<el-radio-group class="resource_types" size="small" v-model="queryData.showType" @change="queryResourceData()">
				<el-radio :label="undefined">全部</el-radio>
				<el-radio v-for="(item, index) in dictEnums['FILE_TYPE']" :key="index" :label="item.value">
					<svg-icon :icon-name="item.value | fileTypeIcon" size="16"></svg-icon>
					{{ item.msg }}
				</el-radio>
			</el-radio-group>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input size="small" clearable placeholder="请输入库名称" v-model="queryData.keyName">
					<el-button slot="append" icon="el-icon-search" @click="queryResourceData()"></el-button>
				</el-input>
			</el-form-item>
		</el-form>
		<resource-handler slot="header" v-model="checkedData" :data="resourceData" @refresh="queryResourceData()" />
		<template slot="component">
			<resource-content v-model="checkedData" :data="resourceData" :library="libraryData" @refresh="queryResourceData()" />
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryResourceData()" />
		</template>
		<file-form v-model="fileDialog" @refresh="queryResourceData()"></file-form>
		<link-form v-model="linkDialog" @refresh="queryResourceData()"></link-form>
		<folder-form v-model="folderDialog" @refresh="queryResourceData()"></folder-form>
	</sw-common-frame>
</template>

<script>
import { mapGetters } from 'vuex';
import fileForm from './form/file';
import linkForm from './form/link';
import folderForm from './form/folder';
import resourceHandler from './layout/handler';
import resourceContent from './layout/content';
import handleMixins from './mixins/handleMixins';
import { getResourceList } from '@/api/data/tbNetDisk';
import { queryLibrarySetting } from '@/api/data/tbNetDiskDir';

export default {
	mixins: [handleMixins],
	components: { resourceHandler, resourceContent, fileForm, linkForm, folderForm },
	data() {
		return {
			loading: false,
			//资源库数据
			libraryData: {},
			//选中资源
			checkedData: [],
			//资源列表
			dataCount: 0,
			queryData: { page: 1, limit: 120 },
			resourceData: [],
			//选中文件夹
			checkedFolder: '',
			fileDialog: false,
			linkDialog: false,
			folderDialog: false
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		libraryId() {
			return this.$route.params.id || '';
		},
		folderId() {
			return this.$route.query.folder || '';
		}
	},
	watch: {
		libraryId: {
			async handler(val) {
				await this.getLibraryDetail(val);
				if (!this.folderId) {
					this.queryResourceData();
				} else {
					this.checkedFolder = this.folderId;
				}
			},
			immediate: true
		},
		folderId(val) {
			this.checkedFolder = val;
		},
		checkedFolder(val) {
			this.queryResourceData();
		}
	},
	methods: {
		//获取资源库详情
		async getLibraryDetail(id) {
			let result = await queryLibrarySetting(id).then((res) => res.data);
			if (result.code === '0') {
				this.libraryData = this.$detailData(result.data);
			}
		},

		//格式化列表参数
		formatListParams() {
			let params = { ...this.queryData };
			params['dirId'] = this.libraryId;
			params['pId'] = this.checkedFolder || '0';
			return params;
		},

		//获取资源数据
		async getResourceData() {
			let params = this.formatListParams();
			let result = await getResourceList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.resourceData = result.data || [];
			}
		},

		//查询资源数据
		queryResourceData() {
			this.loading = true;
			this.getResourceData();
		},

		handleCommandEvent(command) {
			if (command === 'addFiles') {
				this.fileDialog = true;
			} else if (command === 'addLinks') {
				this.linkDialog = true;
			} else if (command === 'addFolder') {
				this.folderDialog = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_types::v-deep {
	display: flex;
	align-items: center;
	padding: 3px;
	border-radius: 4px;
	background-color: #eef1f5;
	.el-radio {
		margin: 0;
		padding: 0 8px;
		border-radius: 4px;
		&.is-checked {
			background-color: #fff;
		}
	}
	.el-radio__input {
		display: none;
	}
	.el-radio__label {
		display: flex;
		align-items: center;
		height: 26px;
		padding: 0;
		.svg-icon {
			margin-right: 4px;
		}
	}
}
.resource_handler {
	border-top: solid 1px #f5f7fa;
}
</style>
